<template>
  <!-- 这里是资金流水 -->
  <div class="main-content-container">
    <div ref="search">
      <Twotabs ref="aaabbb" class="money-flowing" :label="['现金流水', '余额流水']" @cheackTabs="cheackTabs" />
      <el-row>
        <el-col class="searchs-y">
          <el-form ref="searchs" label-width="80px" :inline="true">
            <el-form-item>
              <el-input v-model="likeVal" placeholder="收/退款单号、姓名、手机号、编号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
              <el-form-item v-if="false" class="spn buttons clear-button">
                <el-button type="text" @click="eliminate">清除</el-button>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-form>
        <el-row class="float-l">
          <Search
            :data-value="dataValue"
            :data="selections"
            :attribute="'createdTime'"
            @change="handleTypeChange"
            @dateChange="handleDateChange"
          />
          <el-form-item>
            <el-select
              v-if="activeTab === 'first'"
              v-model="search.direction"
              placeholder="请选择流向"
              class="el-select-y"
              @change="getList"
            >
              <el-option
                v-for="item in flowToList"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-if="activeTab === 'first'"
              v-model="search.payType"
              placeholder="请选择支付方式"
              class="el-select-y"
              @change="getList"
            >
              <el-option
                v-for="item in paymentList"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-if="activeTab !== 'first'"
              v-model="search.direction"
              placeholder="请选择流向"
              class="el-select-y"
              @change="getList"
            >
              <el-option
                v-for="item in flowToList"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-if="activeTab !== 'first'"
              v-model="search.type"
              placeholder="请选择类型"
              class="el-select-y"
              @change="getList"
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 92) + 'px'">
      <div v-show="activeTab === 'first'" class="margin-top">
        <el-table v-loading="tableData.loading" :data="tableData" border :row-class-name="tableColor" :height="innerHeight">
          <el-table-column label="流水单号" prop="logCode" :show-overflow-tooltip="true" />
          <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
          <el-table-column label="流向" prop="direction" :show-overflow-tooltip="true" />
          <el-table-column label="收/退款单号" prop="paymentId" :show-overflow-tooltip="true" />
          <el-table-column label="时间" prop="createdTime" :show-overflow-tooltip="true" />
          <el-table-column label="经办人" prop="payee" :show-overflow-tooltip="true" />
          <el-table-column label="支付方式" prop="payType" :show-overflow-tooltip="true" />
          <el-table-column label="金额" prop="payAmount" :show-overflow-tooltip="true" />
        </el-table>
      </div>
      <el-table
        v-show="activeTab === 'second'"
        v-loading="tableData.loading"
        class="margin-top"
        :data="tableData"
        border
        :row-class-name="tableColor"
        :height="innerHeight"
      >
        <el-table-column label="流水单号" prop="logCode" :show-overflow-tooltip="true" />
        <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column label="流向" prop="direction" :show-overflow-tooltip="true" />
        <el-table-column label="类型" prop="type" :show-overflow-tooltip="true" />
        <el-table-column label="收/退款单号" prop="paymentId" :show-overflow-tooltip="true" />
        <el-table-column label="时间" prop="createdTime" :show-overflow-tooltip="true" />
        <el-table-column label="经办人" prop="payee" :show-overflow-tooltip="true" />
        <el-table-column label="支付方式" prop="payType" :show-overflow-tooltip="true" />
        <el-table-column label="金额" prop="payAmount" :show-overflow-tooltip="true" />
      </el-table>
      <pagination
        :page-num="queryParams.page"
        :page-size="queryParams.pageSize"
        :on-change="handlePaginationChange"
        :total="totals"
      />
    </div>
  </div>
</template>
<script>
import Twotabs from "@/components/Twotabs";
import Search from "@/components/Search";
// import SearchSelection from "@/components/SearchSelection";
import { selections } from "@/config";
import { tableColor, labelHeigh } from '@/utils/common.js';

export default {
  components: {
    // SearchSelection,
    Twotabs,
    Search,
  },
  data() {
    return {
      selections,
      selection: "all",
      activeTab: "first",
      tableColor,
      innerHeight: null,
      params: {},
      total: {
        zfb: 0,
        wx: 0,
        pos: 0,
        money: 0,
      },
      tableData: [],
      search: {
      },
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      totals: 0,
      flowToList: [
        { id: 1, value: "收款" },
        { id: 2, value: "退款" },
      ],
      paymentList: [
        { id: 6, value: "支付宝" },
        { id: 1, value: "微信" },
        { id: 2, value: "现金" },
        { id: 3, value: "银联" },
        { id: 4, value: "POS" },
        { id: 5, value: "其他" },
      ],
      flowToList1: [
        { id: 1, value: "收入" },
        { id: 2, value: "支出" },
      ],
      typeList: [
        { id: 1, value: "充值" },
        { id: 2, value: "消费" },
        { id: 3, value: "退余额" },
        { id: 4, value: "退单" },
      ],
      dataValue: "",
      likeVal: "",
      custQuery: "",
    };
  },
  mounted() {
    this.getList();
    this.$nextTick(function() {
      this.innerHeight = labelHeigh(this.$refs.search);
    });
  },
  methods: {
    handleChange() {
      if (this.likeVal.indexOf("SK") > 0) {
        // 通过收款单号查询
      }
      if (this.likeVal.indexOf("TK") > 0) {
        // 通过收款单号查询
      }
      this.queryParams.page = 1;
      this.getList();
    },
    handleDateChange(val) {
      this.queryParams.page = 1;
      Object.assign(this.search, val);
      this.getList();
    },
    handleTypeChange(val) {
      this.queryParams.page = 1;
      this.dataValue = val.timeType;
      Object.assign(this.search, val);
      this.getList();
    },
    cheackTabs(val) {
      this.dataValue = "";
      this.activeTab = val;
      this.queryParams.page = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    async getList() {
      // 获取列表数据
      const search = JSON.parse(JSON.stringify(this.search));
      if (search.direction === "不限流向") search.direction = undefined;
      if (search.payType === "不限支付方式") search.payType = undefined;
      if (search.type === "不限类型") search.type = undefined;
      if (!search.createdTime) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        search.timeType = "today";
        search.createdTime = beginTime + "_" + endTime;
      }
      const res = await this.$api[
        "financialCenter/moneyFlowing/paymentOrderLog"
      ]({
        ...this.queryParams,
        query: {
          ...search,
          logType: this.activeTab === "first" ? "实收流水" : "余额流水",
        },
        custQuery: this.custQuery,
      });
      if (res.code !== 200) return;
      this.tableData = res.data.result;
      this.totals = res.data.total;
      // this.$api['financialCenter/moneyFlowing/lsList']({
      //   ...this.queryParams, query: { ...this.search, 'logType': "实收流水" },
      // }).then(res => {
      //   if (res.code !== 200) return;
      //   this.tableData = res.data.result;
      // });
      // this.$api['financialCenter/moneyFlowing/lsList']({
      //   ...this.queryParams, query: { ...this.search, 'logType': "卡券流水" },
      // }).then(res => {
      //   if (res.code !== 200) return;
      //   this.tableData1 = res.data.result;
      // });
    },
    handlePaginationChange(pagination) {
      this.queryParams = {
        page: pagination.pageNum,
        pageSize: pagination.pageSize,
      };
      this.getList();
    },
    searchBtn() {
      const val = this.search.name;
      if (!val) return false;
      const json = {};
      if (val.length < 10) {
        json.customerName = val;
      } else if (val.length === 11) {
        const res = /^1\d{10}$/;
        if (res.test(val)) {
          json.customerPhone = val;
        } else {
          this.$message.error("请输入正确得手机号码");
        }
      } else {
        json.customerCode = val;
      }
      Object.assign(this.search, json);
      this.queryParams.page = 1;
      this.getList();
    },
    eliminate() {
      this.custQuery = "";
      this.likeVal = "";
      this.queryParams.page = 1;
      this.getList();
    },
  },
};
</script>
<style scoped lang="scss">
.margin-top {
  margin-top: 20px;
}
// 清除按钮
.clear-button button{
  margin-left:10px;
  color:#666666!important;
  margin-top:9px;
}
.clear-button{
  margin-bottom: 0 !important;
}
</style>
